
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>角色权限分配</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">

    <style>
        .layui-form-label {
            width: 10%;
        }
        .layui-input-block {
            margin-left: 12%;
        }
        img {
            width: 200px;
            height: 120px;
        }
        .layui-upload-list {
            margin-left: 12%;
        }
    </style>
</head>

<body>
<div style="margin: 15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>角色权限分配(角色名称：${role.name})</legend>
        <div class="layui-input-block">
            <!-- <a href="javascript:history.back();" class="layui-btn" style="float: right;">返回</a> -->
        </div>
    </fieldset>
	<form class="layui-form" action="">
	  
	  <div id="xtree1" style="width:400px;border:0px solid black;padding: 10px 0 25px 200px;"></div>
	  
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="formSubmit" id="dasdsadasda" type="button">确定分配</button>
	      <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:history.back();">返回</button>
	    </div>
	  </div>
	</form>
	</div>

 <script type="text/javascript" src="/plugins/layui/layui.js"></script>
 <script type="text/javascript" src="/plugins/layui/layui-xtree/layui-xtree.js"></script>

<script type="text/javascript">
var json;
    layui.use(['form'], function () {
        var form = layui.form
        ,$=layui.jquery;
        var xtree3 = new layuiXtree({
            elem: 'xtree1'                  //必填三兄弟之老大
            , form: form                    //必填三兄弟之这才是真老大
            , data: '/manage/role/getNavigationTree?roleId=${role.id}' //必填三兄弟之这也算是老大
            , isopen: true  //加载完毕后的展开状态，默认值：true
            , ckall: true    //启用全选功能，默认值：false
            , ckallback: function () { } //全选框状态改变后执行的回调函数
            , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
                open: "&#xe7a0;"       //节点打开的图标
                , close: "&#xe622;"    //节点关闭的图标
                , end: "&#xe621;"      //末尾节点的图标
            }
            , color: {       //三种图标颜色，独立配色，更改几个都可以
                open: "#EE9A00"        //节点图标打开的颜色
                , close: "#EEC591"     //节点图标关闭的颜色
                , end: "#828282"       //末级节点图标的颜色
            }
            , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
                console.log(data.elem); //得到checkbox原始DOM对象
                console.log(data.elem.checked); //开关是否开启，true或者false
                console.log(data.value); //开关value值，也可以通过data.elem.value得到
                console.log(data.othis); //得到美化后的DOM对象
            }
        });

        //监听提交
       
	form.on('submit(formSubmit)', function(data) {
			var oCks = xtree3.GetAllCheckBox(); //这是方法
			var arr = new Array();
			for ( var i = 0; i < oCks.length; i++) {
				if (oCks[i].checked == true && oCks[i].value != 'on') {
					arr.push(oCks[i].value);
				}
			}
			$.ajax({
				type : "POST",
				url : "/manage/role/saveRoleNavigation",
				dataType : "json",
				data : {
					"roleId" : "${role.id}",
					"navigationIds" : arr.join(',')
				},
				success : function(data) {
					layer.alert(data.msg, {
						skin : 'layui-layer-molv' //样式类名  自定义样式
						,
						closeBtn : 1 // 是否显示关闭按钮
						,
						anim : 1 //动画类型
						,
						btn : [ '确定' ] //按钮
						,
						icon : data.code >= 0 ? 1 : 2 // icon
						,
						yes : function(index) {
							if (data.code >= 0) {
								location.href = "/manage/role/roleList";
							} else {
								layer.close(index);
							}
						}
					});
				},
				error : function() {
					alert("系统异常,请稍后重试");
				}
			});
			return false;
		});

	});
</script>

</body>
</html>
      